<template>
	<view class="shop-select">
		<u-input v-if="!isClearing" v-model="selectedShopName" :placeholder="placeholder" clearable @input="filterShopList" @focus="handleFocus" @blur="handleBlur" @clear="handleClear" ref="shopInput">
			<u-icon name="search" slot="prefix" size="28"></u-icon>
		</u-input>
		<u-input v-if="isClearing" v-model="selectedShopName" :placeholder="placeholder" clearable @input="filterShopList" @focus="handleFocus" @blur="handleBlur" @clear="handleClear" ref="shopInput2">
			<u-icon name="search" slot="prefix" size="28"></u-icon>
		</u-input>
		<view class="shop-list" v-if="showShopList && filteredShopList.length > 0">
			<view class="shop-item" v-for="(item, index) in filteredShopList" :key="index" @click="selectShop(item)">
				<text>{{item[displayField]}}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ShopSelector',
	props: {
		value: {
			type: Object,
			default: () => ({})
		},
		shopList: {
			type: Array,
			default: () => []
		},
		// 配置字段名
		fieldConfig: {
			type: Object,
			default: () => ({
				valueField: 'value', // 值字段
				labelField: 'label', // 显示字段
				displayField: 'label', // 列表显示字段
				placeholder: '请选择',
				codeField: 'code', // 存储code的字段
				nameField: 'name' // 存储name的字段
			})
		}
	},
	computed: {
		valueField() {
			return this.fieldConfig.valueField || 'value';
		},
		labelField() {
			return this.fieldConfig.labelField || 'label';
		},
		displayField() {
			return this.fieldConfig.displayField || 'label';
		},
		placeholder() {
			return this.fieldConfig.placeholder || '请选择';
		},
		codeField() {
			return this.fieldConfig.codeField || 'code';
		},
		nameField() {
			return this.fieldConfig.nameField || 'name';
		}
	},
	data() {
		return {
			showShopList: false,
			filteredShopList: [],
			selectedShop: null,
			isClearing: false,
			selectedShopName: ''
		}
	},
	watch: {
		value: {
			immediate: true,
			handler(newVal) {
				if (newVal && newVal[this.nameField]) {
					this.selectedShopName = newVal[this.nameField];
					this.selectedShop = this.shopList.find(shop => shop[this.valueField] === newVal[this.codeField]);
				} else {
					this.selectedShopName = '';
					this.selectedShop = null;
				}
			}
		},
		shopList: {
			immediate: true,
			handler(newList) {
				if (this.value && this.value[this.codeField]) {
					this.selectedShop = newList.find(shop => shop[this.valueField] === this.value[this.codeField]);
					if (this.selectedShop) {
						this.selectedShopName = this.selectedShop[this.displayField];
					}
				}
			}
		}
	},
	methods: {
		filterShopList() {
			if (!this.selectedShopName) {
				this.filteredShopList = [];
				return;
			}
			const searchText = this.selectedShopName.toLowerCase();
			this.filteredShopList = this.shopList.filter(item => 
				item[this.displayField].toLowerCase().includes(searchText)
			);
		},
		selectShop(item) {
			this.selectedShop = item;
			this.selectedShopName = item[this.displayField];
			this.filteredShopList = [];
			this.showShopList = false;
			const newValue = {
				...this.value,
				[this.codeField]: item[this.valueField],
				[this.nameField]: item[this.labelField]
			};
			this.$emit('input', newValue);
		},
		handleBlur() {
			if (this.isClearing) {
				return;
			}
			setTimeout(() => {
				this.showShopList = false;
				this.filteredShopList = [];
				if (!this.selectedShopName) {
					const newValue = {
						...this.value,
						[this.codeField]: '',
						[this.nameField]: ''
					};
					this.$emit('input', newValue);
					return;
				}
				if (this.selectedShop) {
					this.selectedShopName = this.selectedShop[this.displayField];
					const newValue = {
						...this.value,
						[this.codeField]: this.selectedShop[this.valueField],
						[this.nameField]: this.selectedShop[this.labelField]
					};
					this.$emit('input', newValue);
					return;
				}
				if (this.filteredShopList.length === 0) {
					this.selectedShopName = '';
					const newValue = {
						...this.value,
						[this.codeField]: '',
						[this.nameField]: ''
					};
					this.$emit('input', newValue);
				}
			}, 200);
		},
		handleClear() {
			this.isClearing = true;
			this.selectedShopName = '';
			this.selectedShop = null;
			this.filteredShopList = [];
			this.showShopList = false;
			const newValue = {
				...this.value,
				[this.codeField]: '',
				[this.nameField]: ''
			};
			this.$emit('input', newValue);
			setTimeout(() => {
				this.isClearing = false;
			}, 300);
		},
		handleFocus() {
			this.showShopList = true;
			this.filteredShopList = [];
			if (this.selectedShopName) {
				this.filterShopList();
			}
		},
		handleMouseDown(e) {
			if (e.target.closest('.u-icon-close')) {
				e.preventDefault();
				e.stopPropagation();
			}
		}
	}
}
</script>

<style lang="scss">
.shop-select {
	position: relative;
	width: 100%;
}

.shop-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	max-height: 300rpx;
	overflow-y: auto;
	z-index: 100;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.shop-item {
	padding: 20rpx;
	border-bottom: 1px solid #eee;
	&:last-child {
		border-bottom: none;
	}
	&:active {
		background-color: #f5f7fa;
	}
}
</style> 